<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="public/login.css">
    <title>用户注册信息</title>
    <script type="text/javascript" src="public/jquery-3.2.0.min.js"></script>
</head>
<body onload="randnum()">
<div class="box">
    <div class="div">
        <div class="nav">
            <ul style="list-style: none">
                <a id="zc" href="?c=Reg&a=index">注册</a>
                <a id="dl" href="?c=Index&a=index">登录</a>
            </ul>
        </div>
        <h1>欢迎注册本站会员</h1>
    </div>
<div class="reg" id="reg1">
    <h1>账号注册</h1>
    <div class="main2">
        <div class="div1">
            <span class="lab">账号：</span>
            <input type="text" id="id1" name="username" placeholder="3-18位英文字母与数字组合">
            <span class="tip1"></span>
        </div>
        <div class="div1">
            <span class="lab">密码：</span>
            <input type="password" id="password1" name="password" placeholder="密码长度为6-15位字符">
            <span class="tip2"></span>
        </div>
        <div class="div1">
            <span class="lab">验证码：</span>
            <input type="text" id="num1" name="num" placeholder="请在此输入右边的数字">
            <div  class="div2"></div><span id="warn1"></span>
        </div>
        <div class="div3"><input type="button" id="reg" value="注册"></div>
    </div>
</div>
</div>
</body>
<script type="text/javascript">
    //生成随机数方法//
    function randnum(){
        var arr = Array("0","1","2","3","4","5","6","7","8","9");
        var code = "";
        for(var i=0;i < 4;i++){
            var rand = Math.random()*10 ;
            var rand = Math.floor(rand);
            code += arr[rand];
        };
        $(".div2").text(code);
    }

    //检测账号//
    $("#id1").bind("blur",function() {
        var uname = $(this).val();
        var lenn = uname.length ;
        var regName=/^[0-9a-z]{3,18}$/i;//正则表达式查找字母数字//
        var test=regName.test(uname);
        if(lenn==0){
            $(".tip1").css("color","#FF0512");
            $(".tip1").text("✘账号不能为空！");
        }else if (lenn < 3 || lenn > 18){
            $(".tip1").css("color","#FF0512");
            $(".tip1").text("✘账号长度不符合要求！");
        }else if(!test){
            $(".tip1").css("color","#FF0512");
            $(".tip1").text("✘账号不能含有非法字符！")
        }else{
            $.ajax({
            type: "GET",
            url: "?c=Regtest&a=test",
            data: {username: uname},
            dataType: "text",
            success: function (e) {
                if(e==0){
                    $(".tip1").css("color","#FF0512");
                    $(".tip1").text("✘账号已被注册，换一个吧！");
                }else{
                    $(".tip1").css("color","#1c11ff");
                    $(".tip1").text("✔该账号可用！");
                    };
                }
            })
        }
    });

    //检验密码//
    $("#password1").bind("blur",function(){
        var Psd = $(this).val() ;
        var lenPsd = Psd.length ;
        if(lenPsd==0){
            $(".tip2").css("color","#FF0512") ;
            $(".tip2").text("✘密码不能为空！") ;
        }else if(lenPsd < 3 || lenPsd > 15){
            $(".tip2").css("color","#FF0512") ;
            $(".tip2").text("✘密码长度不符合要求！") ;
        }else {
            $(".tip2").css("color","#1c11ff") ;
            $(".tip2").text("✔输入正确") ;
        };
    });

    //点击数字刷新验证码
    $(".div2").bind("click",function()
        {
            randnum()
        });
    //失去焦点时对输入验证码进行验证
    $("#num1").bind("blur",function (){
        var num2 = $("#num1").val();
        var code1=$(".div2").text();
        if(num2.length==0){
            $("#warn1").text("✘验证码不能为空！");
            $("#warn1").css("color","#FF0512");
        }
    });

    //发起提交//
    $("#reg").bind("click",function(){
        var nid = $("#id1").val();
        var Psd1 = $("#password1").val();
        var num = $("#num1").val();
        var div2Num=$(".div2").text();
        if(nid.length > 0){
            var regName=/^[0-9a-z]{3,18}$/i;//正则表达式查找字母数字//
            var test=regName.test(nid);
            if (nid.length < 3 || nid.length > 18){
                $(".tip1").css("color","#FF0512");
                $(".tip1").text("✘账号长度不符合要求！");
            }else if(!test){
                $(".tip1").css("color","#FF0512");
                $(".tip1").text("✘账号不能含有非法字符！")
            }else{
                if(Psd1.length==0){
                    $(".tip2").css("color","#FF0512") ;
                    $(".tip2").text("✘密码不能为空！") ;
                }else{
                    if (num!=div2Num){
                        $("#warn1").text("✘验证码错误！");
                        $("#warn1").css("color","#FF0512");
                        $("#num1").val("");
                        randnum();
                    }else{
                        $.ajax({
                            type: "GET",
                            url: "?c=Regsubmit&a=submit",
                            data: {username: nid ,password:Psd1},
                            dataType: "text",
                            success: function (rel) {
                                if(rel==1){
                                    alert("注册成功");
                                    window.location.reload();
                                }else if(rel==0){
                                    alert("账号已存在，不能重复注册!");
                                    window.location.reload();
                                }
                            }
                        })
                    }
                }
            }
        }else{
            $(".tip1").css("color","#FF0512");
            $(".tip1").text("✘账号不能为空！");
        }
    });
</script>
</html>